<template>

  <div>
    <el-card class="box-card" style="border-radius: 10px; margin: 10px;">

      <el-tabs type="border-card">

        <el-tab-pane>
          <span slot="label"><i class="el-icon-edit-outline"></i> 节点编辑器</span>
          <div>
            <el-row class="codeEditor">
              <el-col :span="24" style="text-align: right;">
                <el-button style="margin-right: 10px;" type="success" @click="save(1)" size="mini">保存</el-button>
              </el-col>
            </el-row>
            <div>


            </div>
            <CodeEditor v-model="value" mode="yaml"/>

          </div>
        </el-tab-pane>


        <el-tab-pane>

          <span slot="label"><i class="el-icon-document"></i> 节点列表</span>

          <el-row class="data_table">
            <el-row>
              <el-col :span="20">
                <div style="height: 30px; padding: 0px 0 0 0; text-align:left;margin-bottom: 10px;">
                  <el-button style="width: 10%;" type="primary" @click="addModule()" size="mini">+ 新增模块</el-button>
                </div>
              </el-col>
              <el-col :span="4" style="text-align: right;">
                <div>
                  <el-button style="margin-right: 10px;" type="success" @click="save(2)" size="mini">保存</el-button>
                </div>
              </el-col>
            </el-row>


            <el-table :data="tableData" border style="width: 100%;padding: 0;" row-key="id" class="mydata3">

              <el-table-column prop="name" label="模块名称" style="font-weight: bold!important;" width="180">
<!--                <template slot-scope="scope">-->
<!--                  <el-input v-model="scope.row.name" placeholder="" clearable size="small"/>-->
<!--                </template>-->
              </el-table-column>

              <el-table-column prop="code" label="编码" align="center">

                <template slot-scope="scope">
                  <el-input v-model="scope.row.code" placeholder="" clearable size="small"/>
                </template>

              </el-table-column>

              <el-table-column

                label="操作"
                align="center"
                width="150">
                <template slot-scope="scope">
                  <el-button @click="delModule(scope.$index)" type="danger" size="mini">删除</el-button>
                </template>
              </el-table-column>


              <el-table-column prop="name" label="详情" fixed="left" width="100" type="expand">
                <template #default="props">
                  <div style="height: 30px; padding: 0px 0 0 0; text-align:left;margin-bottom: 10px; position: absolute;z-index: 5;">
                    <el-button style="width: 118px;" type="success" @click="addNode(props.$index)" size="mini">+ 新增节点
                    </el-button>
                  </div>
                  <el-table :data="props.row.nodes" border style="width: 100%; margin-top: 35px;" slot="reference" stripe
                            class="mydata2">

                    <el-table-column prop="IP" label="IP">
                      <template slot-scope="scope">
                        <el-input v-model="scope.row.ip" placeholder="" clearable size="small" style="z-index: 5;"/>
                      </template>
                    </el-table-column>

                    <el-table-column prop="port" label="port">
                      <template slot-scope="scope">
                        <el-input v-model="scope.row.port" placeholder="" clearable size="small"/>
                      </template>
                    </el-table-column>

                    <el-table-column prop="port" label="name">
                      <template slot-scope="scope">
                        <el-input v-model="scope.row.name" placeholder="" clearable size="small"/>
                      </template>
                    </el-table-column>

                    <el-table-column

                      label="操作"
                      align="center"
                      width="129">
                      <template slot-scope="scope">
                        <el-button @click="delNode(props.$index, scope.$index)" type="danger" size="mini">删除</el-button>
                      </template>
                    </el-table-column>

                  </el-table>

                </template>
              </el-table-column>

            </el-table>


          </el-row>

        </el-tab-pane>

<!--        <el-tab-pane>-->

<!--          <span slot="label"><i class="el-icon-document"></i> 节点树形查看器</span>-->
<!--          <vue-json-editor v-model="jsonValue"/>-->
<!--          <div>-->
<!--            <el-button style="position: absolute; top: 19px; right: 24px;" type="success" @click="save(3)" size="mini">保存-->
<!--            </el-button>-->
<!--          </div>-->

<!--        </el-tab-pane>-->


      </el-tabs>
      <div class="myupload">
        <el-button style="" type="primary" @click="downloadTemplate" size="mini">下载模板</el-button>

        <el-upload
          class="upload-demo"
          :headers="myHeaders"
          :action="importExcelUrl"
          :on-success="onSuccess"
          multiple
          :limit="1"
          :data=type0
          style="display: inline-block; margin-left: 30px;"
          :show-file-list="false"
        >
          <el-button size="mini" type="success"
          ><i class="el-icon-upload2 el-icon--right"></i
          > 追加导入
          </el-button>
        </el-upload>

        <el-upload
          class="upload-demo"
          :headers="myHeaders"
          :action="importExcelUrl"
          :on-success="onSuccess"
          multiple
          :limit="1"
          :data=type1
          style="display: inline-block; margin-left: 10px;"
          :show-file-list="false"
        >
          <el-button size="mini" type="warning"
          ><i class="el-icon-upload2 el-icon--right"></i
          > 覆盖导入
          </el-button>
        </el-upload>
      </div>


    </el-card>

  </div>

</template>

<script>
  import { getConfig, saveConfig } from '@/api/node/node'
  import CodeEditor from './CodeEditor'
  import { Message } from 'element-ui'
  import { getToken } from '@/utils/auth'
  import vueJsonEditor from 'vue-json-editor'
  import yaml from 'js-yaml'
  import Template from '../../link/productTemplate/index'

  export default {
    name: 'Node',
    components: { Template, CodeEditor, vueJsonEditor },
    data() {
      return {
        value: '',
        jsonValue: '',
        tableData: [],
        myHeaders: { Authorization: 'Bearer ' + getToken() },
        importExcelUrl: process.env.VUE_APP_BASE_API + '/system/node/importExcel',
        type0: { 'type': 0 },
        type1: { 'type': 1 }
      }
    },
    mounted() {
      getConfig().then(res => {
        this.convertData(res.data)

      })
    },

    methods: {

      getClassName(row) {
        // 根据行数据返回类名，这里只是一个示例，你可以根据需要自定义逻辑
        if (row.nodes && row.nodes.length > 0) {
          return 'expanded-row' // 自定义的类名，可以在 CSS 中定义样式
        } else {
          return '' // 没有展开时的类名或空字符串
        }
      },

      save(type) {
        if (type === 2){

          let saveJson = {}

          for (let index in this.tableData){
            let code = this.tableData[index].code
            saveJson[code]= this.tableData[index].nodes
          }

          let jsonObj = {"solver":{"server":saveJson}};


          this.value = yaml.dump(jsonObj).replaceAll('\'', '').replaceAll('"', '');
        }

        // else if (type === 3){
        //   this.value = yaml.dump(this.jsonValue)
        // }

        saveConfig({ 'value': this.value }).then(res => {
          this.$message.success('保存成功')

          this.convertData(this.value)
        })
      },

      importTable(type) {

      },

      // 文件上传成功回调
      onSuccess(response) {
        if (response.code !== 200) {
          this.$message.error(response.msg)
          return
        }

        this.$message.success('导入成功')

        this.convertData(response.data)

      },

      // 添加模块
      addModule() {
        let jsonObj = {
          'id': '',
          'name': '',
          'code': '',
          'nodes': []
        }
        this.tableData.push(jsonObj)
      },

      // 删除模块
      delModule(index) {
        this.tableData.splice(index, 1)
      },

      // 添加节点
      addNode(index){
        let jsonObj = {
          'ip': '',
          'port': '',
          'name': ''
        }
        this.tableData[index].nodes.push(jsonObj)
      },

      // 删除节点
      delNode(index1, index2){
        this.tableData[index1].nodes.splice(index2, 1)
      },

      convertData(val) {
        this.value = val

        this.jsonValue = yaml.load(val)

        this.tableData = []

        for (let key in this.jsonValue.solver.server) {
          let jsonObj = {
            'id': key,
            'name': this.GlobalVariable.getModuleType(key),
            'code': key,
            'nodes': this.jsonValue.solver.server[key]
          }
          this.tableData.push(jsonObj)
        }

        // console.info('json转换yaml', yaml.dump(this.jsonValue))
      },

      // 下载模板
      downloadTemplate(){
        window.open("/node_template.xlsx")
      },

    }
  }
</script>
